<template>
	<el-container>
		<el-header style="height: auto; ">
			<div class="serch_hearder_group">

				<div class="serch_hearder_item">
					<span  style="white-space: nowrap;">内容：</span>
					<el-input v-model="query.name" placeholder="请输入内容"></el-input>
				</div>
				<div class="serch_hearder_item">
					<el-button    v-on:click="search()">检索</el-button>
				</div>
				<div class="serch_hearder_item">
					<el-button   type="primary"  	v-if="perms['hotel:hotelMember:edit']" v-on:click="add()">添加</el-button>
				</div>
			</div>
		</el-header>
		<el-main >
			<el-table
					:data="tableData"
					border
					v-loading="loading"
					style="width: 100%;margin-top: 1px; margin-left: 1px;">
                                    <el-table-column   label="id"  >
                        <template slot-scope="scope">
                            {{ scope.row.id }}
                        </template>
                    </el-table-column>
                                    <el-table-column   label="姓名"  >
                        <template slot-scope="scope">
                            {{ scope.row.name }}
                        </template>
                    </el-table-column>
                                    <el-table-column   label="性别"  >
                        <template slot-scope="scope">
                            {{ scope.row.sex }}
                        </template>
                    </el-table-column>
                                    <el-table-column   label="身份证号"  >
                        <template slot-scope="scope">
                            {{ scope.row.idCard }}
                        </template>
                    </el-table-column>
                                    <el-table-column   label="地址"  >
                        <template slot-scope="scope">
                            {{ scope.row.address }}
                        </template>
                    </el-table-column>
                                    <el-table-column   label="金额"  >
                        <template slot-scope="scope">
                            {{ scope.row.money }}
                        </template>
                    </el-table-column>
                                    <el-table-column   label="级别"  >
                        <template slot-scope="scope">
                            {{ scope.row.level }}
                        </template>
                    </el-table-column>
                                    <el-table-column   label="openId"  >
                        <template slot-scope="scope">
                            {{ scope.row.openId }}
                        </template>
                    </el-table-column>
                                    <el-table-column   label="唯一ID"  >
                        <template slot-scope="scope">
                            {{ scope.row.uId }}
                        </template>
                    </el-table-column>
                                    <el-table-column   label="电话"  >
                        <template slot-scope="scope">
                            {{ scope.row.mobile }}
                        </template>
                    </el-table-column>
                                    <el-table-column   label="创建时间"  >
                        <template slot-scope="scope">
                            {{ scope.row.createTime }}
                        </template>
                    </el-table-column>
                				<el-table-column label="操作" width="350">
					<template slot-scope="scope">
						<el-button
								type="primary"
								size="mini"
								v-if="perms['hotel:hotelMember:edit']"
								@click="edit(scope.$index, scope.row)">编辑</el-button>
						<el-button
								size="mini"
								type="danger"
                                v-if="perms['hotel:hotelMember:edit']"
								@click="del(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
					@size-change="size"
					@current-change="now"
					:page-sizes="[1,5, 10]"
					:page-size="query.limit"
					layout="total, sizes, prev, pager, next"
					:total="total">
			</el-pagination>
		</el-main>

	</el-container>
</template>

<script>

import {mapGetters} from 'vuex'
import { post ,getData} from "@/api/user";
export default {
	computed:{
		...mapGetters([
			'perms'
		])
	},
	name: "sysuser",
	data(){
		return {
			tableData:[],
			total:0,
			query:{
				limit:10,
				offset:0,
				name:''
			},
			loading:false
		}
	},
methods:{
	search(){
		this.getList()
	},
	add(){
		this.$router.push({
			path:"/hotelMember/edit"
		})
	},
	edit(index,row){
		this.$router.push({
		path:"/hotelMember/edit",
		query: {id:row.id}
		})
	},
	del(index,row){
		let _this = this
		this.$confirm('确定要删除吗？', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(() => {
			post("/hotel/hotelMember/remove",{
			id:row.id
		}).then(res=>{
				_this.$message(res.msg)
				_this.getList()
			}).catch(err=>{

			})
		}).catch(() => {
		});
	},
	size(val){
		this.query.limit = val
		this.getList()
	},
	now(val){
		this.query.offset = (val-1) * this.query.limit
		this.getList()
	},
	getList(){
		let _this = this
		_this.loading = true
		post("/hotel/hotelMember/list",_this.query).then(res =>{
			_this.tableData =  res.rows
			_this.total = res.total
			_this.loading = false
		}).catch(err=>{

		})
	}
},
	created(){
		this.getList()
	}
}
</script>

<style scoped>
	.el-header{
		display: flex;
		padding-top: 25px;
	}
</style>